<template>
  <div class="qyui-cell row qyui-container" :loading="loading">
    <div class="qyui-cell " style="height:85px">
      <Toolbar></Toolbar>
    </div>
    <div class="qyui-cell col qyui-container">
      <!-- <reportTree></reportTree> -->
      <div class="qyui-cell col">
        <div style="position: relative;height: 100%; width:100%;overflow: hidden;">
          <div style="position: absolute;height: 1020px; width:2020px">
            <SketchRule
              :thick="thick" :scale="scale" :width="2000" :height="1000" :start-x="startX"
              :start-y="startY"
              :shadow="shadow" :corner-active="true"
            >
            </SketchRule>
          </div>
          <div
            ref="containerRef"
            style="position:absolute;height: calc(100% - 20px);width:calc(100% - 20px);left:20px;top:20px;background-color:#808000;overflow: auto;"
            @scroll="handleScroll"
          >
            <div style="position: relative;height: 1000px; width:2000px;overflow: hidden;">
              <PanReportPage> </PanReportPage>
            </div>
          </div>
        </div>
      </div>
      <rightSetting></rightSetting>
    </div>
    <ReportViewPropertyDlg v-model:visible="manager.states.ReportViewPropertyVisible"></ReportViewPropertyDlg>
    <DataSource v-model:visible="manager.states.EditDataSourceVisible"></DataSource>
    <!-- <EditDataSourceParam v-model:visible="manager.states.EditDataSourceParamVisible"></EditDataSourceParam> -->
    <TableViewPropertyDlg v-model:visible="manager.states.EditTableVisible"></TableViewPropertyDlg>
    <EditExpression v-model:visible="manager.states.EditExpressionVisible"></EditExpression>
  </div>
</template>
<script>
import PanReportPage from './PanReportPage.vue';
import ReportViewPropertyDlg from './dlg/ReportViewPropertyDlg.vue';
import SketchRule from '@/components/Ruler/sketchRuler.vue';
import DataSource from './DataSource/index.vue';
// import EditDataSourceParam from './EditDataSource/EditDataSourceParam.vue';
import TableViewPropertyDlg from './dlg/TableViewPropertyDlg.vue';
import Toolbar from './Toolbar/index.vue';
import ReportInfoManager from './ReportInfoManager.js';
import { getQueryString } from '@/utils/index';
import EditExpression from '../EditExpression.vue';
// import reportTree from './reportTree.vue';
import rightSetting from './RightSetting/index.vue';

import { computed } from 'vue';
export default {
  components: {
    PanReportPage,
    ReportViewPropertyDlg,
    SketchRule,
    DataSource,
    // EditDataSourceParam,
    Toolbar,
    TableViewPropertyDlg,
    EditExpression,
    // reportTree,
    rightSetting,
  },
  provide() {
    return {
      manager: computed(() => this.manager),
    };
  },
  data() {
    const manager = new ReportInfoManager();
    return {
      loading: true,
      manager,
      scale: 1, // 658813476562495, //1,
      startX: 0,
      startY: 0,
      thick: 20,
      rectWidth: 0,
      rectHeight: 0,
      wraperWidth: 0,
      demo: import.meta.env.MODE === 'demo',
    };
  },
  computed: {
    shadow() {
      return {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
      };
    },
    canvasStyle() {
      return {
        width: this.rectWidth,
        height: this.rectHeight,
        transform: `scale(${this.scale})`,
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    async  init() {
      if (this.demo) {
        // 演示环境使用数据
        await this.manager.loadReport(1);
      } else {
        let reportId = getQueryString('id');
        reportId = reportId || -1;
        await this.manager.loadReport(reportId);
      }
      this.loading = false;
    },
    handleScroll($event) {
      this.startX = $event.srcElement.scrollLeft;
      this.startY = $event.srcElement.scrollTop;
    },

  },
};
</script>
<style lang="scss">
.wrapper {
  background-color: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  width: 1018px;
  height: 618px;
}

#screens {
  position: relative;
  ;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.screen-container {
  position: absolute;
  width: 2000px;
  height: 2000px;
}

.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}

.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}

.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}

.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}

#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 200px;
  background: lightblue;
  transform-origin: 50% 0;
}
</style>
